<template>
  <div class="home">
    <div class="showStyle">
      <!-- <h2 @click="share">点击分享</h2> -->
        <div class="showList" v-for="(show,index) in list[this.$store.state.language]" :key="index" @click="jumpToIntroduction(show.id)">
            <!-- <div class="myimg"><img class="img" :src="show.pic" alt="">
            </div> -->
          <div class="myimg" :style="{ 'background-image':`url('${show.pic}')` }"></div>
            <p class="title">{{show.title}}</p>
            <p class="dates">{{show.dates}}</p>
        </div>
    </div>
  </div>
</template>

<script>
import requireShare from "@/plugin/requireShare.js";
// import requireConfig from "@/plugin/requireConfig.js";

export default {
  data() {
    return {
      list: []
      //分享
      // mydata: {
      //   code: 0,
      //   msg: "请求成功的消息",
      //   content: "这里放数据",
      //   is_mobile_user: true,
      //   jssdk: {
      //     appId: "wxec4d172a4f73ee6f",
      //     timestamp: "1487756879",
      //     nonceStr: "58ad5e4f70226",
      //     signature: "418034b044c61eef9375ada45a1dc373a5e4b7db"
      //   }
      // }
    };
  },
  methods: {
    jumpToIntroduction(id) {
      this.$router.push({ path: `/introduction/${id}` });
    },
    //请求
    getShowList() {
      this.$http
        .get("/exhibitionList", {})
        .then(response => {
          this.list = response.data;
        })
        .catch(function(response) {
          console.log(response);
        });
    },
    share() {
      const that = this;
      requireShare(
        that,
        "标题",
        "内容",
        "/show",
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541493238489&di=a389f0c93092fd9242112f7099ee467a&imgtype=0&src=http%3A%2F%2Fpic42.photophoto.cn%2F20170201%2F1155116415548242_b.jpg"
      );
    }
    // requireShare
    // share() {
    //   return requireShare();
    // }
  },
  mounted() {
    this.share();
  },
  beforeMount() {
    // this.share();
  },
  beforeCreate() {
    // this.share();
  },

  // computed: {
  //   // 计算属性的 getter
  //   trueList: function() {
  //     return this.list[this.$store.state.language];
  //   }
  // },
  updated: function() {
    // this.share();
  },
  beforeDestroy() {
    // this.share();
  },
  created: function() {
    this.getShowList();
    // this.share();
  }
};
</script>
<style lang="scss" scoped>
.ignore {
  border-bottom: 1px solid black;
}
.home {
  width: 100%;
  display: flex;
  flex-flow: column;

  .bottom {
    width: 100%;
    position: relative;
    top: 53px;
    img {
      width: 100%;
      height: auto;
    }
    ul {
      font-size: 22px;
      li {
        height: 38.8px;
        line-height: 38.8px;
        list-style-type: none;

        position: relative;
        left: -24px;
        top: -6px;
        a {
          text-decoration: none;
          color: black;
        }
      }
    }
  }
  .showStyle {
    width: 100%;
    position: relative;
    // top: 53px;
    .showList {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .myimg {
        margin-top: 15px;
        width: 345px;
        height: 180px;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: cover !important;
        // height: 250px;
        img {
          // margin-top: 15px;
          width: 100%;
          height: 100%;
        }
      }

      .title {
        width: 345px;
        font-size: 15px;
        margin: 10px 0 4px 0;
        font-weight: bold;
      }
      .dates {
        width: 345px;
        font-size: 13px;
        margin: 0px 0 0 0;
        padding: 0 0 25px 0;
      }
    }
  }
}
</style>

